/*!
 *  @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
 *  @LastEditTime: 2023/2/15 下午5:51
 *  @FilePath: /CasaOS-UI/src/assets/scss/components/_filebrowser.scss
 *  @Description:
 *
 *  Copyright (c) 2023 by IceWhale, All Rights Reserved.
 */

.file-panel {
  .b-sidebar {
    .sidebar-content {
      width: 15rem;
      background-color: none;
      box-shadow: none;
    }
  }

  .modal-card {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    background-color: white !important;

    // operation-status
    .operation-status-bar {
      position: relative;
      z-index: 100;

      .popper {
        box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%);
        background-color: white;
        border: none;
        border-radius: 0.25rem;
        text-align: initial;
        padding: 0 0 0.5rem 0;
        width: 20rem;
      }

      .operation-status-item {
        position: relative;
        width: 20rem;
        padding: 0.5rem 1rem;

        .task-info {
          position: relative;
          z-index: 2;
        }
      }
    }

    .none-line-height {
      line-height: initial;
    }

    .modal-card-head {
      padding: 1.5rem;

      .input.is-rounded {
        border-radius: 9999px !important;
      }

      .is-small.input,
      .is-small.textarea,
      .taginput .is-small.taginput-container.is-focusable {
        border-radius: 2px;
        font-size: 0.75rem;
        height: auto;
      }

      .control .button {
        font-size: 0.875rem;
        height: auto;

        &.is-small {
          font-size: 0.75rem;
        }
      }

      .more-btn {
        width: 30px;
        height: 30px;
        background-color: $primary;
        border-radius: 32px;
        display: flex;
        justify-content: center;
        align-items: center;

        cursor: pointer;
        transition: opacity 0.3s;

        &:hover {
          opacity: 0.8;
        }
      }
    }

    .modal-card-body {
      padding: 0;

      .nav-bar {
        width: 15rem;
        height: 100%;

        //   padding: 0.75rem;
        background: #f8f8f8;
        flex-grow: 0;
        flex-shrink: 0;

        .nav-bar-top {
          overflow-y: auto;
        }

        .title {
          padding: 1.5rem;
        }


        .list-container {
          padding: 0.75rem;
          font-size: 14px;
          font-weight: bolder;
          max-height: calc(100% - 4rem);
          overflow-y: auto;
          overflow-x: hidden;

          ul {
            overflow: hidden;
            transition: height 0.5s cubic-bezier(0.66, 0, 0.01, 1);

            li {
              .list-item {
                padding: 0.625rem 0.75rem 0.625rem 0.75rem;
                margin: 0.125rem 0;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;
                align-items: center;

                .arrow-container {
                  width: 24px;
                  height: 24px;
                }

                span {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                &:hover {
                  background: #f3f3f3;
                }

                &.active {
                  background: #deebfd;
                }

                .icon {
                  overflow: hidden;
                }
              }

              .new-list-item {
                font-size: 0.875rem;
                font-weight: lighter;
              }
            }
          }

          .cover {
            display: flex;
            align-items: center;

            .folder-cover {
              width: 24px;
              height: 24px;
            }

          }
        }

        // Bottom Area
        .bottom-area {
          border-top: rgba(0, 0, 0, 0.1) 1px solid;
          margin: 0.75rem;
          font-size: 14px;
          padding-top: 0.75rem;

          .list-item {
            padding: 0.625rem 0.75rem 0.625rem 0.75rem;
            margin: 0.125rem 0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            align-items: center;

            .arrow-container {
              width: 24px;
              height: 24px;
            }

            span {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            &:hover {
              background: #f3f3f3;
            }

            &.active {
              background: #deebfd;
            }

            .icon {
              overflow: hidden;
            }
          }
        }
      }

      #dropTarget {
        position: relative;
      }

      .content {
        overflow: hidden;
      }

    }

    .toolbar-container {
      position: relative;
      z-index: 100;
    }

    .img-toolbar,
    .operation-toolbar {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgb(49, 49, 54);
      z-index: 100;
      padding: 0.5rem 1rem;
      border-radius: 10px;

      .b-tooltip {
        .toolbar-item {

          padding: 0.25rem 0.5rem;
          border-radius: 5px;
          cursor: pointer;
          transition: background 0.3s;
          margin-left: 0.5rem;

          &.disabled {
            pointer-events: none;

            .block {
              color: #b5b5b5 !important;
            }
          }

          &:hover {
            background-color: rgb(86, 86, 90);
          }

        }

        &:first-child {
          .toolbar-item {
            margin-left: 0;
          }
        }
      }
    }

    .overlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 200;
      background-color: $white;
      flex-direction: column;
      display: flex;

      .file-path-bread {
        padding: 0 1.5rem 0.75rem 1.5rem;
      }

      .v-container {
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;

        .viewer {
          display: none;
        }

        .vue-codemirror {
          padding: 0 1.5rem;
          width: 100%;
          height: 100%;

          .CodeMirror {
            height: 100%;
            font-family: Consolas, "Courier New", monospace !important;
            font-size: 14px;
          }
        }

        .video-container {
          padding: 0 1.5rem;
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          justify-content: center;
        }

        .pdf-container {
          padding: 0 13%;
          width: 100%;
          max-width: 1800px;
          height: 100%;
          position: relative;
          overflow-y: auto;
        }

        .image-container {
          margin: 0 1.5rem;
          width: 100%;
          height: 100%;
          position: relative;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          overflow-y: auto;
        }

        &.code {
          max-height: calc(100% - 8.25rem);
        }

        &.video {
          max-height: calc(100% - 9.875rem);
        }
      }

      .v-footer {
        flex: 0 0 auto;

        .video-footer {
          margin-bottom: 0;
          padding: 1rem 0;
        }
      }
    }

  }


  .thumb-w {
    max-width: 100px;
    border-radius: 5px;
    height: auto;
    z-index: 2;
  }

  .thumb-h {
    max-height: 96px;
    border-radius: 5px;
    width: auto;
    z-index: 2;
  }

  .breadcrumb-container {
    position: relative;
    max-width: calc(100% - 1.5rem);
    overflow: hidden;
  }

  .upload-btns {
    margin: 0 0 10rem 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;

    li {
      margin: 0.5rem;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      width: 106px;
      height: 120px;
      text-align: center;
      padding-top: 20px;
      font-size: 14px;
      line-height: 1.5;
      background: #f8f8f8;
      border-radius: 10px;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgb(235, 235, 235);
      }

      span {
        pointer-events: none;
        padding: 0 0.5rem;
        display: block;
      }

      .image {
        pointer-events: none;
        position: absolute;
        top: 60px;
        left: 25px;
        width: 56px;
        height: 56px;
        margin: 0;
      }
    }
  }


}

#selection {
  position: absolute;
  background: rgba(34, 118, 243, 0.2);
  border: $primary 1px solid;
  width: 0px;
  height: 0px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.file-panel {
  .breadcrumb {
    margin-bottom: 0;

    ul {
      margin-top: 0;
      margin-left: 0;
      flex-wrap: nowrap;

      li {
        margin-top: 0;
        flex-shrink: 0;
        font-weight: normal;
        padding: 0 0.25rem 0 0;

        a {
          color: rgb(90, 90, 90);
          padding-right: 0.5em;
          padding-left: 0.5em;
          margin-left: 0.25em;
          transition: color 0.2s, background-color 0.2s;

          &:hover {
            color: $primary;
            border-radius: 4px;
            background-color: $primary-light;
          }
        }

        &:first-child {
          padding-right: 0.25em;
          padding-left: 0;
        }

        &+li::before {
          color: #b5b5b5;
          content: ">";
        }

        &:last-child {
          overflow: hidden;
          flex-shrink: 1;

          a {
            font-weight: bolder;
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .icon {
          margin: 0 !important;
        }
      }
    }

    &.is-medium {
      font-size: 1rem;
      font-weight: bold;
    }

    &.shadow {
      visibility: hidden;
      position: absolute;
      z-index: 0;


      ul {
        li {
          &:last-child {
            overflow: auto;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}


.file-dropdown {
  .dropdown-menu {
    min-width: 8rem;

    .dropdown-content {

      border-radius: 10px;
      padding: 4px !important;

      .dropdown-divider {
        margin: 4px;
      }

      .dropdown-item {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        border-radius: 5px;
        transition: all 0.25s;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;

        &.has-text-danger {
          &:hover {
            background-color: findLightColor($danger);
          }
        }
      }
    }
  }
}

.file-modal {

  .modal-card {
    max-width: 28rem;

    .modal-card-body {

      .node-card {
        .cover {
          width: 80px;
          height: 80px;
          margin: 0 auto;
          pointer-events: none;

          .file-cover,
          .folder-cover {
            display: flex;
            justify-content: center;
            align-items: center;

            .files-icon {
              width: 80px;
              height: 80px;
            }

          }
        }

        .title {
          font-size: 0.875rem;
          text-align: center;
          pointer-events: none;
        }
      }
    }
  }
}

.content,
.acc-content {
  position: relative;


  .drag-mask {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background: rgba(255, 255, 255, 0.8);
    background: -moz-linear-gradient(top,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 1) 100%);
    text-align: center;

    font-size: 1.25rem;
    flex-direction: column;
    justify-content: center;

    .upload-icon {
      width: 72px;
      height: 72px;
      background-color: $primary;
      border-radius: 72px;
      margin: 0 auto 2rem auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .tool-bar {
    padding: 0 1.5rem;
  }

  .scroll-container {
    // height: auto;
    height: calc(100vh - 7.125rem);
    overflow-y: auto;
    overflow-x: hidden;

    &.mobile-height{
      height: calc(100vh - 8.75rem);
    }

    &.mobile-list-height{
      height: calc(100vh - 11.3125rem);
    }
  }

  // Re-style Checkbox
  input[type=checkbox]+.check {
    border-radius: 50% !important;
    border: 2px solid rgb(201, 201, 201) !important;
    transition: all 0.3s !important;

    &:hover {
      border: 2px solid #2276f3 !important;
    }
  }

  input[type=checkbox]:checked+.check {
    border: 2px solid #2276f3 !important;
  }

  .part {
    input[type=checkbox]+.check {
      border: 2px solid #2276f3 !important;
      background: #2276f3 url("data:image/svg+xml;utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='15' height='15' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M19,13H5V11H19V13Z' /%3E%3C/svg%3E") no-repeat center center !important;
    }
  }

  .node-list {
    .scroll-container {

      .cover {
        .file-cover {
          height: 32px;
          overflow: hidden;
          position: relative;
          border-radius: 0.25rem;

          .thumb-w {
            border-radius: 0;
            max-height: 32px;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
          }

          .thumb-h {
            border-radius: 0;
            max-width: 32px;
            height: auto;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }

  .context-area {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .content-components {
    margin: 0 0.75rem;
    position: relative;
    z-index: 5;

    .card-container {
      position: relative;
      width: 100%;
      display: flex;
      flex-flow: row wrap;

      .grid-card {
        padding: 0 0.75rem;
        height: 200px;

        .file-card {
          display: flex;
          justify-content: center;

          .file-card-item {
            width: 7.5rem;

            .node-card-container {
              .outer-wrapper {
                position: relative;

                .checkbox-container {
                  position: absolute;
                  width: 24px;
                  height: 24px;
                  left: 4px;
                  top: 4px;
                  border-radius: 5px;
                  background-color: white;
                  transition: all 0.25s;
                  margin-bottom: 0;
                  opacity: 0;
                  visibility: hidden;
                  z-index: 3;

                  .b-checkbox {
                    margin-right: 0 !important;
                    left: 4px;
                  }

                  &.show {
                    opacity: 1;
                    visibility: visible;
                  }


                }

                .action-btn {
                  position: absolute;
                  width: 24px;
                  height: 24px;
                  right: 4px;
                  top: 4px;
                  border-radius: 5px;
                  background-color: white;
                  transition: all 0.25s;
                  opacity: 0;
                  visibility: hidden;
                  cursor: pointer;
                  z-index: auto;

                  &.show {
                    opacity: 1;
                    visibility: visible;
                  }
                }

                &:hover {
                  .action-btn {
                    opacity: 1;
                    visibility: visible;
                  }

                  .checkbox-container {
                    opacity: 1;
                    visibility: visible;
                  }

                  .node-card {
                    background: #f8f8f8;
                  }
                }

                &.active {
                  .checkbox-container {
                    opacity: 1;
                    visibility: visible;
                    transition: all 0.25s;
                  }

                  .node-card {
                    background-color: $primary-light;
                  }


                }

                .node-card {
                  border-radius: 10px;
                  transition: all 0.25s;
                  cursor: pointer;
                  padding: 8px 0 10px;
                  position: relative;
                  z-index: 0;

                  &.isCutting {
                    opacity: 0.5;
                  }

                  .cover {
                    margin-bottom: 0.75rem;
                    display: flex;
                    justify-content: center;
                    pointer-events: none;
                    position: relative;

                    .folder-cover,
                    .file-cover {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 116px;
                      height: 96px;

                      .folder-icon {
                        width: 96px;
                        height: 96px;
                      }

                      .files-icon {
                        width: 80px;
                        height: 80px;
                      }
                    }

                    .friendly-name {
                      position: absolute;
                      z-index: 2;
                      font-size: 0.75rem;
                      right: 1.1rem;
                      bottom: -0.25rem;
                      color: #0d529a;
                      max-width: 75%;
                      overflow: hidden;
                      white-space: nowrap;
                      -o-text-overflow: ellipsis;
                      text-overflow: ellipsis;
                    }
                  }

                  .info {
                    pointer-events: none;

                    .title {
                      width: 100%;
                      text-align: center;
                      font-size: 0.875rem;
                      line-height: 1.5em;
                      max-width: 100%;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      -o-text-overflow: ellipsis;
                      text-overflow: ellipsis;
                      overflow-wrap: break-word;
                      margin-bottom: 2px;
                      -webkit-transition: color 0.3s ease;
                      -o-transition: color 0.3s ease;
                      transition: color 0.3s ease;
                      padding: 0 0.5rem;
                      font-weight: normal;
                    }

                    .desc {
                      width: 100%;
                      text-align: center;
                      font-size: 0.75rem;
                      line-height: 1.5em;
                      color: rgba(37, 38, 43, 0.36);
                      max-width: 100%;
                      overflow: hidden;
                      white-space: nowrap;
                      -o-text-overflow: ellipsis;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  // Upload List
  .upload-list {
    position: absolute;
    z-index: 30;
    width: 375px;
    right: 32px;
    bottom: 28px;

    .content {
      max-width: initial !important;
    }

    .card-header {
      box-shadow: none;
      transition: background 0.3s;

      &:hover {
        background-color: #f8f8f8;
      }
    }

    .collapse-trigger {
      position: relative;
      z-index: 10;

      .card-header-title {
        padding: 0.75rem 1rem;
        margin: 0;
      }
    }

    .collapse-content {
      position: relative;
      z-index: 2;
    }

    .card-content {
      height: 464px;
      padding: 0px;
      overflow-y: auto;
      position: relative;

      .content {
        width: 100% !important;
        max-width: 100%;
      }
    }

    .card-footer {
      position: absolute;
      background-color: $white;
      bottom: 0;
      width: 100%;
      z-index: 2;
      border-top: none;

      .b-tooltip {
        width: 100%;
      }

      .card-footer-item {
        width: 100%;
        padding: 0.5rem;
        color: $grey-darker;

        &:visited {
          color: $grey-darker;
        }

        &:active {
          color: $grey-darker;
        }

        &:hover {
          color: $primary;
        }
      }
    }

    .uploader-list {
      font-size: 0.875rem;

      .task {
        display: flex;
        width: 100%;
        padding: 14px 18px 14px 16px;
        height: 64px;
        position: relative;

        .task-progress {
          position: absolute;
          z-index: 0;
          left: 0;
          top: 0px;
          height: 64px;
          background: $primary-light;
          min-width: 4px;
          transition: width 0.3s ease;

          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 0;
            left: 0;
            bottom: 4px;
            height: 2px;
            width: 100%;
            background-color: $primary;
          }
        }

        .task-info {
          position: relative;
          display: flex;
          align-items: center;

          .cover {
            margin-right: 16px;

            .folder-cover {
              width: 36px;
              height: 36px;

              .folder-icon {
                width: 36px;
                height: 36px;
              }
            }
          }

          .task-info-wrapper {
            display: flex;
            flex-direction: column;

            .task-file-name {
              font-size: 14px;
              line-height: 1.5;
              width: 200px;
              display: inline-block;
              max-width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .task-desc-wrapper {
              display: flex;
              align-items: center;

              .task-desc {
                font-size: 12px;
                line-height: 1.6;
                display: flex;
                align-items: center;
                color: $grey;
              }

              .task-dot {
                display: inline-block;
                padding: 0 7px;
                align-items: center;

                &::before {
                  content: "";
                  display: block;
                  width: 2px;
                  height: 2px;
                  background: $grey;
                }
              }
            }
          }
        }

        .action {
          position: absolute;
          top: 0;
          right: 16px;
          height: 100%;
          display: flex;
          align-items: center;
          display: none;

          .action-icon {
            display: flex;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-left: 22px;
            background-color: transparent;
            -webkit-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
            color: $grey;

            &:hover {
              background-color: $grey-lighter;
            }
          }
        }

        &:hover {
          .action {
            display: flex;
          }
        }
      }
    }
  }
}

.detail-panel {
  .modal-card-body {
    min-height: 200px;
  }
}

.context-menu {
  position: fixed;
  z-index: 100;
}

.empty-container {
  width: 100%;
  height: 100%;
}

.table-thead {
  height: 42px;
}

// Table Header
.table-thead,
.tbody {
  .tr-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 2.5rem;

    .tr {
      display: flex;
      flex-grow: 1;
      overflow: hidden;
      align-items: center;
      border-top: #f8f8f8 1px solid;
      border-bottom: #f8f8f8 1px solid;
      margin-left: -0.25rem;
      margin-right: -0.25rem;

      .th,
      .td {
        height: 40px;
        font-size: 14px;
        line-height: 1.6;
        justify-content: space-between;
        display: flex;
        align-items: center;

        &:nth-child(1) {
          margin-left: 2rem;
          padding-left: 0;
          flex-grow: 1;
          min-width: 80px;
        }

        &:nth-child(2) {
          margin-left: 1.5rem;
          padding-left: 0;
          width: 140px;
          flex-grow: 0;
        }

        &:nth-child(3) {
          margin-left: 1.5rem;
          padding-left: 0;
          width: 80px;
          flex-grow: 0;
        }
      }
    }
  }
}

.tbody {
  .scroll-container {
    overflow-y: overlay;
  }

  .tr-wrapper {
    padding: 0 2rem;

    .action-wrapper {
      position: absolute;
      width: 24px;
      height: 24px;
      display: flex;
      right: 0;
    }

    .tr {
      transition: all 0.25s;
      cursor: pointer;

      &.active {
        background-color: $primary-light !important;
      }

      &.isCutting {
        opacity: 0.5;
      }

      .td {
        position: relative;
        justify-content: initial;
        box-sizing: border-box;

        &:nth-child(1) {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
          min-width: 160px;
          padding-right: 24px;
          position: relative;
        }

        height: 52px;
        border-top: 0;

        .cover {
          width: 32px;
          height: 32px;
          margin-right: 20px;
          flex-shrink: 0;
          flex-grow: 0;
          pointer-events: none;
        }

        .text {
          text-align: left;
          max-width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 0;
          position: absolute;
          padding-left: 48px;
          padding-right: 24px;
          pointer-events: none;
          line-height: 1.2em;
        }

        .checkbox-container {

          opacity: 0;
          visibility: hidden;
          transition: all 0.25s;

          &.show {
            opacity: 1 !important;
            visibility: visible !important;
          }

        }

        .action-btn {
          transition: all 0.25s;
          opacity: 0;
          visibility: hidden;
          cursor: pointer;
          width: 24px;
          height: 24px;
          right: 4px;
          top: 4px;
          border-radius: 5px;

          &.show {
            opacity: 1 !important;
            visibility: visible !important;
          }

          &:hover {
            opacity: 1;
            background-color: white;
          }
        }
      }

      &:hover {
        background-color: #f8f8f8;

        .checkbox-container {
          opacity: 1;
          visibility: visible;
        }

        .action-btn {
          opacity: 0.7;
          visibility: visible;
        }
      }
    }
  }
}


// New List View
.fliebroswer {
  .table-thead {
    .tr-wrapper {
      display: flex;
      justify-content: space-between;
      position: relative;
      padding: 0 2rem;

      .tr {
        display: flex;

        .th,
        .td {
          height: 40px;
          font-size: 0.875rem;
          line-height: 1.5em;
          justify-content: space-between;
          display: flex;
          align-items: center;

          &:nth-child(1) {
            width: 24px !important;
            min-width: auto;
            margin-left: 0;
            flex-grow: 0;
            flex-shrink: 0;
          }

          &:nth-child(2) {
            text-align: left;
            margin-left: 0.4rem;
            padding-left: 0;
            flex-grow: 1;
            min-width: 80px;
          }

          &:nth-child(3) {
            margin-left: 1rem;
            padding-left: 0;
            width: 140px;
            flex-grow: 0;
            flex-shrink: 1;
          }

          &:nth-child(4) {
            margin-left: 1rem;
            padding-left: 0;
            width: 80px;
            flex-grow: 0;
            flex-shrink: 1;
          }
        }
      }
    }
  }

  .tbody {
    .scroll-container {
      overflow-y: overlay;
    }

    .tr-wrapper {
      padding: 0 2rem;

      .action-wrapper {
        position: absolute;
        width: 24px;
        height: 24px;
        display: flex;
        right: 0;
      }

      .tr {
        transition: all 0.25s;
        cursor: pointer;

        &.isCutting {
          opacity: 0.5;
        }

        .td {
          position: relative;
          justify-content: initial;
          box-sizing: border-box;
          height: 52px;
          border-top: 0;

          &:nth-child(1) {
            width: 24px !important;
            min-width: auto;
            margin-left: 0;
            flex-grow: 0;
            flex-shrink: 0;
          }

          &:nth-child(2) {
            text-align: left;
            margin-left: 0.4rem;
            padding-left: 0;
            flex-grow: 1;
            min-width: 80px;
          }

          &:nth-child(3) {
            margin-left: 1rem;
            padding-left: 0;
            width: 140px;
            flex-grow: 0;
            flex-shrink: 1;
          }

          &:nth-child(4) {
            margin-left: 1rem;
            padding-left: 0;
            width: 80px;
            flex-grow: 0;
            flex-shrink: 1;
          }

          .cover {
            width: 32px;
            height: 32px;
            margin-right: 20px;
            flex-shrink: 0;
            flex-grow: 0;
            pointer-events: none;
          }

          .text {
            text-align: left;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 0;
            position: absolute;
            padding-left: 48px;
            padding-right: 24px;
            pointer-events: none;
          }

          .action-btn {
            transition: all 0.25s;
            opacity: 0;
            visibility: hidden;
            cursor: pointer;
            width: 24px;
            height: 24px;
            right: 4px;
            top: 4px;
            border-radius: 5px;

            &:hover {
              opacity: 1;
              background-color: white;
            }
          }
        }

        &:hover {
          background-color: #f8f8f8;

          .action-btn {
            opacity: 0.7;
            visibility: visible;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .file-panel {
    .animation-content {
      max-width: 100% !important;
      width: 100% !important;
    }

    .modal-card {
      margin: 0;
    }
  }

}

@media screen and (max-width: 480px) {
  .file-panel {
    .animation-content {
      max-width: 100% !important;
      width: 100% !important;
    }

    .modal-card {
      margin: 0;

      .modal-card-body {

        .content {
          max-width: 100%;
        }
      }
    }
  }

}